<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="conter section-bg p-md rel" style="overflow: hidden;">
			 
			<view class="flex-center p-t-md rel" style="z-index: 2;" v-if="configInfo.with_open == 1 || configInfo.recharge_open == 1">
				<view style="width: 35%;" v-if="configInfo.with_open == 1">
					<u-button
						:text="$t('my_agent.with-add')" 
						shape="circle"
						:plain="true"
						:color="configInfo.mainColor1" 
						@click="$util.go('my/addagent',{login:true})"
					>
					</u-button>
				</view>
				 
			</view>
			 
			 
		</view>
		
		<view class="conter">
			<view class="special-title"  v-if="AgentLog.data.length > 0">
				<view class="flex-between" style="align-items: center;">
					<text class="title">{{$t('my_agent.with-myagent')}}</text>
					 
				</view>
			</view>
			<view class="log-list">
				<m-loading :show="listLoad" :emptyShow="AgentLog.data.length <= 0"></m-loading>
				<view class="log-list_list" v-if="!listLoad">
					<view class="list-item text-xs" v-for="(item,index) in AgentLog.data" :key="index">
						<view class="flex-between" style="margin-bottom: 5rpx;">
							<view class="list-item_title u-line-1">{{item.username}}</view>
							<!-- <view class="list-item_num text-md" :class="{on : item.num > 0}">{{item.num}}</view> -->
						</view>
						<view class="flex-between">
							<text class="list-item_time">{{item.addtime}}</text>
							<view class="list-item_type">
								<!-- <text class="font" v-if="item.num < 0">[{{$t('my_wallet.log-screen-payout')}}]</text> -->
								<!-- <text class="font" v-if="item.num > 0">[{{$t('my_wallet.log-screen-income')}}]</text> -->
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
			</view>
		</view>
		
		 <u-picker 
			:show="pickerShow" 
			ref="uPicker" 
			:closeOnClickOverlay="true" 
			:columns="accountColumns" 
			keyName="label"
			@confirm="pickerConfirm" 
			@close="pickerShow = false" 
			@cancel="pickerShow = false">
		</u-picker>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				showLoading:false,
				status:"loading",
				pickerShow:false,
				listLoad:true,
				scrollTop:0,
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			accountColumns: state => state.wallet.accountColumns,
			accountLog: state => state.wallet.accountLog,
			AgentLog: state => state.wallet.AgentLog,
			accountParam: state => state.wallet.accountParam,
			contentText: state => state.content.contentText,
		}),
		async onLoad(){
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		async onShow(){
			this.getUserInfo()
			this.getLogList()
		},
		onHide(){
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 下滑加载数据
		async onReachBottom(){
			if (this.AgentLog.current_page >= this.AgentLog.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getLogList(this.accountParam.page + 1);	
		},
		
		methods: {
			...mapActions(['getUserInfo','getAccountLog','getAgentLog']),
			...mapMutations(['updateWalletState']),
			
			async getLogList(page = 0){
				if (page) {
					let accountParam = uni.$u.deepClone(this.accountParam)
					accountParam.page = page
					this.updateWalletState({
						key: 'AgentLog',
						val: accountParam
					})
				}
				// console.log(this.AgentLog)
				await this.getAgentLog(this.accountParam)
				this.listLoad = false
			},

			pickerConfirm(e){
				let value = e.value[0]; 
				if(this.accountParam.onScreenText != value.label){
					this.listLoad = true
					this.accountParam.onScreenText = value.label
					this.accountParam.action = value.action
					this.showLoading = false
					this.getLogList(1)
				}
				this.pickerShow = false
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:$bgcolor-2;
	}
	.conter{
		// overflow: hidden;
	}
	.icon-bg{
		position: absolute;
		right: -60px;
		bottom: -60px;
		font-size: 200px!important;
		z-index: 1;
		opacity: .1;
	}
	.log-list{
		&_list{
			background-color: #fff;
			border-radius: 10px;
			border-top-left-radius: 0;
		}
		.list-item{
			padding: 15px 30rpx;
			border-bottom: 1px solid #f3f3f3;
			.flex-between{
				align-content: center;
			}
			&_title{
				width: 66%;
				color: #666;
				// margin-bottom: 5px;
			}
			&_num{
				font-weight: bold;
				color: $uni-color-error;
			}
			&_num.on{
				color: $uni-color-success;
			}
			&_time{
				color: #999;
			}
		}
	}
	
	.m-walletcard{
		margin: 15px 30rpx;
	}
	
</style>
